/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component,Fragment} from 'react';
import {
  Form, Input, Radio, Select, Icon, Button,
  DatePicker, TreeSelect, Descriptions, Modal,
} from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
import BuildModalTitle from "@/components/BuildModalTitle";
import {afterCloseModal} from "@/utils/utils";
import Departments from "@/pages/InnerAddressBook/Departments";
import SelectUser from "@/pages/InnerAddressBook/SelectUser";
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList:[],
      username:'',
      all_users:[],
      organizationData:[],
      selectUser:{
        username:this.props.editRecord?this.props.editRecord.username:'',
        id:this.props.editRecord?this.props.editRecord.user_id:'',
      }
    };
  }

  componentDidMount() {
    this.fetAllUser()
    const that=this;
    request(`/all_departments`,{
      method:'GET',
      params:{
        order_direction:'desc'
      }
    }).then((response)=> {
      if(response.status===200){
        that.setState({
          organizationData:response.data.data
        })
      }
    });
  }
  fetAllUser=(value)=>{
    const that=this;
    request(`/search_users`, {
      method: 'GET',
      params:{
        ...value
      }
    }).then((response)=> {
      console.log('all_structures', response)
      if(response.status===200){
        that.setState({
          all_users:response.data.data
        })
      }
    })
  }
  renderTreeNodes = data =>
    data.map((item,index) => {

      if (item.children.length>0) {
        return (
          <TreeNode value={item.id} title={item.name} key={item.id+index} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode  value={item.id}   key={item.id+index}  title={item.name}  />;
    });
  render() {
    const organizationData=this.state.organizationData
    console.log('organizationData',organizationData)
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const {getFieldDecorator} = this.props.form;
    const props = {
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList }) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList: this.state.fileList,
    };
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <Descriptions column={4}  className={'blue-descriptions'} title={<div style={{textAlign:'center'}}>入职详情</div>} bordered>
            <Descriptions.Item span={2} label="真实姓名">
              {getFieldDecorator('name', {
                initialValue: this.props.editRecord?this.props.editRecord.name:'',
                rules: [{ required: true, message: '请输入姓名' }],
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item span={2} label="关联系统账号">
                <div style={{positon:'relative'}}>
                  <Input disabled={true} value={this.state.selectUser.username}/>
                  <Button style={{position:'absolute',right:'42px'}} type={'primary'} onClick={()=>{
                    this.setState({
                      username:this.props.form.getFieldValue('name'),
                      selectModal:true
                    })
                  }}>选择</Button>
                </div>
            </Descriptions.Item>

            <Descriptions.Item label="入职日期">
              {getFieldDecorator('entry_date', {
                initialValue: (this.props.editRecord&&this.props.editRecord.entry_date)?moment(this.props.editRecord.entry_date):'',
                rules: [{ required: true, message: '请输入入职日期' }],
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="入职部门">
              {getFieldDecorator('department_id', {
                initialValue: this.props.editRecord?this.props.editRecord.department_id:'',
                rules: [{ required: true, message: '请选择部门' }],
              })(
                <TreeSelect
                  treeDefaultExpandAll
                  allowClear
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                >
                  {this.renderTreeNodes(organizationData)}
                </TreeSelect>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="入职职位">
              {getFieldDecorator('position', {
                initialValue: this.props.editRecord?this.props.editRecord.position:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="手机号">
              {getFieldDecorator('mobile', {
                initialValue: this.props.editRecord?this.props.editRecord.mobile:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="身份证">
              {getFieldDecorator('identity_number', {
                initialValue: this.props.editRecord?this.props.editRecord.identity_number:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="生日">
              {getFieldDecorator('birthday', {
                initialValue: (this.props.editRecord&&this.props.editRecord.birthday)?moment(this.props.editRecord.birthday):'',
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="邮箱">
              {getFieldDecorator('email', {
                initialValue: this.props.editRecord?this.props.editRecord.email:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="性别">
              {getFieldDecorator('sex', {
                initialValue: this.props.editRecord?this.props.editRecord.sex:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="族别">
              {getFieldDecorator('ethnicity', {
                initialValue: this.props.editRecord?this.props.editRecord.ethnicity:'',
              })(
                <Select>
                  <Option value={''}>未知</Option>
                  <Option value={'汉族'}>汉族</Option>
                  <Option value={'维吾尔族'}>维吾尔族</Option>
                  <Option value={'回族'}>回族</Option>
                  <Option value={'其他'}>其他</Option>
                </Select>
              )}
            </Descriptions.Item>
            {
              this.props.editRecord&&
              <Descriptions.Item label="年龄">
                {getFieldDecorator('age-ignore', {
                  initialValue: this.props.editRecord?this.props.editRecord.age:'',
                })(
                  <Input disabled={true}/>
                )}
              </Descriptions.Item>
            }
            <Descriptions.Item label="参加工作时间">
              {getFieldDecorator('start_work_time', {
                initialValue: (this.props.editRecord&&this.props.editRecord.start_work_time)?moment(this.props.editRecord.start_work_time):'',
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="政治面貌">
              {getFieldDecorator('political_status', {
                initialValue: this.props.editRecord?this.props.editRecord.political_status:'',
              })(
                <Select>
                  <Option value={''}>未知</Option>
                  <Option value={'中共党员'}>中共党员</Option>
                  <Option value={'群众'}>群众</Option>
                </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="入党时间">
              {getFieldDecorator('join_party_time', {
                initialValue: (this.props.editRecord&&this.props.editRecord.join_party_time)?moment(this.props.editRecord.join_party_time):'',
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="学历">
              {getFieldDecorator('education', {
                initialValue: this.props.editRecord?this.props.editRecord.education:'',
              })(
                <Select>
                  <Option value={''}>未知</Option>
                  <Option value={'初中以下'}>初中以下</Option>
                  <Option value={'初中'}>初中</Option>
                  <Option value={'中专'}>中专</Option>
                  <Option value={'高中'}>高中</Option>
                  <Option value={'大专'}>大专</Option>
                  <Option value={'本科'}>本科</Option>
                  <Option value={'研究生'}>研究生</Option>
                  <Option value={'其他'}>其他</Option>
                </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="学历起始时间">
              {getFieldDecorator('education_start_time', {
                initialValue: (this.props.editRecord&&this.props.editRecord.education_start_time)?moment(this.props.editRecord.education_start_time):'',
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="学历结束时间">
              {getFieldDecorator('education_end_time', {
                initialValue: (this.props.editRecord&&this.props.editRecord.education_end_time)?moment(this.props.editRecord.education_end_time):'',
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="毕业院校">
              {getFieldDecorator('graduated_school', {
                initialValue: this.props.editRecord?this.props.editRecord.graduated_school:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="专业">
              {getFieldDecorator('major', {
                initialValue: this.props.editRecord?this.props.editRecord.major:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="籍贯">
              {getFieldDecorator('hometown', {
                initialValue: this.props.editRecord?this.props.editRecord.hometown:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="出生地">
              {getFieldDecorator('birth_place', {
                initialValue: this.props.editRecord?this.props.editRecord.birth_place:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="户籍种类">
              {getFieldDecorator('hometown_type', {
                initialValue: this.props.editRecord?this.props.editRecord.hometown_type:'',
              })(
                <Select>
                  <Option value={''}>未知</Option>
                  <Option value={'农业户口'}>农业户口</Option>
                  <Option value={'非农业户口'}>非农业户口</Option>
                </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="现住址">
              {getFieldDecorator('current_address', {
                initialValue: this.props.editRecord?this.props.editRecord.current_address:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="签订劳动合同时间">
              {getFieldDecorator('sign_contract_time', {
                initialValue: (this.props.editRecord&&this.props.editRecord.sign_contract_time)?moment(this.props.editRecord.sign_contract_time):'',
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="员工类别">
              {getFieldDecorator('staff_type', {
                initialValue: this.props.editRecord?this.props.editRecord.staff_type:'',
              })(
                <Select>
                  <Option value={''}>未知</Option>
                  <Option value={'正式员工'}>正式员工</Option>
                  <Option value={'劳务派遣员工'}>劳务派遣员工</Option>
                  <Option value={'季节性临时工'}>季节性临时工</Option>
                </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="备注">
              {getFieldDecorator('remark', {
                initialValue: this.props.editRecord?this.props.editRecord.remark:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
          </Descriptions>
        </Form>
        <Modal
          title={<BuildModalTitle visible={this.state.selectModal} modalClass="selectModal"
                                  title={`选择关联系统账号`} />}
          destroyOnClose
          visible={this.state.selectModal}
          centered
          width={900}
          onOk={this.handleChangeStatus}
          className="selectModal"
          afterClose={() => {
            afterCloseModal(); // destroyOnClose需要
          }}
          onCancel={() => {
            this.setState({ selectModal: false});
          }}
        >
          <SelectUser refleshDepartments={this.SelectUser} username={this.state.username} selectUser={(row)=>{
            this.setState({
              selectModal: false,
              selectUser:row
            })
          }}
          />

        </Modal>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default AddPoliciesFormWrap;


